<template>
	<scroll-view scroll-y class="page" @scroll="listenScroll">
		<banner :imgList="imgList"></banner>
		<view class="action-bar flex-box">
			<view class="action">
				<image src="/static/icon/calendar.png"></image>
				<view>每日推荐</view>
			</view>
			<view class="action">
				<image src="/static/icon/song.png"></image>
				<view>歌单</view>
			</view>
			<view class="action">
				<image src="/static/icon/rank.png"></image>
				<view>排行榜</view>
			</view>
			<view class="action">
				<image src="/static/icon/radio.png"></image>
				<view>电台</view>
			</view>
			<view class="action">
				<image src="/static/icon/live.png"></image>
				<view>直播</view>
			</view>
		</view>
		<view class="card">
			<view class="card-head flex-box flex-valign">
				<view class="flex-item">推荐歌单</view>
				<navigator>歌单广场</navigator>
			</view>
			<view class="card-body">
				<uni-grid :column="3" :show-border="false" :square="false">
					<uni-grid-item v-for="(song, index) in songList" :key="index">
						<view class="song-box">
							<view class="amount"><i class="music-icon music-icon-play-sm"></i> {{song.amount}}万</view>
							<image :src="song.img"></image>
							<view class="desc">{{song.desc}}</view>
						</view>
					</uni-grid-item>
				</uni-grid>
			</view>
		</view>
		<view class="card">
			<view class="card-head flex-box flex-valign">
				<view class="flex-item">推荐歌单</view>
				<navigator>歌单广场</navigator>
			</view>
			<view class="card-body">
				<uni-grid :column="3" :show-border="false" :square="false">
					<uni-grid-item v-for="(song, index) in songList" :key="index">
						<view class="song-box">
							<view class="amount"><i class="music-icon music-icon-play-sm"></i> {{song.amount}}万</view>
							<image :src="song.img"></image>
							<view class="desc">{{song.desc}}</view>
						</view>
					</uni-grid-item>
				</uni-grid>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	import banner from '../../../components/banner/banner.vue'
	import uniGrid from "@/components/uni-grid/uni-grid.vue"
	import uniGridItem from "@/components/uni-grid-item/uni-grid-item.vue"
	let enablePullDownRefresh = true;
	let imgList = [
		'http://p1.music.126.net/SAS6xNBn9kTmb0AKuZGxdg==/109951164270655042.jpg',
		'http://p1.music.126.net/Qtt5odVhWC4VWy-__V2AWg==/109951164269970730.jpg',
		'http://p1.music.126.net/TMalquknmG9NjkJ4qGHt4g==/109951164270651234.jpg',
		'http://p1.music.126.net/8GPZ91i0rBteF33MEPJHHQ==/109951164270648824.jpg',
		'http://p1.music.126.net/uqHwzINTHDdmOdDvtFBgYg==/109951164270669173.jpg',
		'http://p1.music.126.net/ojuXpfpUhU_F1t08E7BIFQ==/109951164270661530.jpg'
	];
	let songList = [
		{
			img: 'http://p2.music.126.net/IkO4ZYPmvt5wGMer7fB-8g==/109951164271719654.jpg?param=140y140',
			amount: 72,
			desc: '立秋 | 愿所有夏日遗憾，都被秋风温柔化解'
		},
		{
			img: 'http://p2.music.126.net/2KEbtFD68jB43gXpHwylgg==/19126004765780202.jpg?param=140y140',
			amount: 19,
			desc: '『夏日终曲』沙滩摇滚与褪去炽热的海风'
		},
		{
			img: 'http://p2.music.126.net/fXqqtoBjkEAJHYDgOBGW2w==/109951163613409873.jpg?param=140y140',
			amount: 381,
			desc: '经典粤语合集【无损音质】黑胶唱片会员专属'
		},
		{
			img: 'http://p1.music.126.net/Ykdbus1htTiWp3dO61C-LQ==/109951164269791836.jpg?param=140y140',
			amount: 182,
			desc: '我的名字（Cover：焦迈奇）'
		},
		{
			img: 'http://p2.music.126.net/Vul1lVY04aTjJU984riRXw==/19056735533185390.jpg?param=140y140',
			amount: 1045,
			desc: '【精选】欧美踩点混剪bgm燃向/剧情向'
		},
		{
			img: 'http://p1.music.126.net/njp9BG6XVS49q0x6FTosjA==/109951164274839072.jpg?param=140y140',
			amount: 51,
			desc: '神仙翻唱丨超好听的翻唱cover集鸭'
		},
	]
	export default {
		components: {
			banner,
			uniGrid,
			uniGridItem
		},
		data() {
			return {
				imgList: [],
				songList: [] 
			}
		},
		methods: {
			loadData() {
				setTimeout(() => {
					this.imgList.splice(0, this.imgList.length, ...imgList);
					this.songList.splice(0, this.songList.length, ...songList);
				}, 600)
			},
			listenScroll(e) {
				let scrollTop = e.detail.scrollTop;
				this.$emit('scroll', scrollTop);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page{
		font-size: 18rpx;
	}
	.action-bar {
		padding: 45rpx 0;
		justify-content: space-around;
		border-bottom: $border-color solid 4rpx;
	}

	.action {
		text-align: center;
		image {
			width: 61rpx;
			height: 61rpx;
			border-radius: 50%;
		}
	}

	.card {
		padding: 30rpx;
	}
	.card-head{
		.flex-item{
			font-size: 24rpx;
			font-weight: bold;
		}
		navigator{
			padding: 6rpx 12rpx;
			border-radius: 18rpx;
			font-size: 20rpx;
			border: $border-color solid 1rpx;
		}
	}
	.card-body{
		margin-top: 30rpx;
	}
	.song-box{
		position: relative;
		font-size: 18rpx;
		.amount{
			position: absolute;
			top: 8rpx;
			right: 8rpx;
			color: #FFFFFF;
			z-index: 10;
		}
		image{
			width: 220rpx;
			height: 220rpx;
			border-radius: 6rpx;
		}
		.desc{
			width: 220rpx;
			font-weight: bold;
		}
	}
</style>
